import React, { Component } from 'react'
import './Top10.style.scss'
import Grid from 'components/grid/Grid'
import { get } from 'api/http'
export default class Top10 extends Component {
    constructor() {
        super();
        this.state = {
            datalist: []
        }
    }
    render() {
        return (
            <div className="Top10Catiner">
                <h2>精品好菜</h2>
                <Grid
                    column={2}
                    imgRadius={0}
                    list={this.state.datalist.slice(0, 10)} hasMore={false}
                    renderTitle={({ item }) => {
                        return (
                            <>
                                <h3>{item.name}</h3>
                                <h4>{item.all_click}浏览 {item.favorites}收藏</h4>
                            </>
                        )
                    }}>
                </Grid>
            </div>
        )
    }

    async componentDidMount() {
        let rs = await get('/api/cookbooklist');
        // console.log(rs);
        this.setState({
            datalist: rs.data.data
        })
    }

}
